import React, {useCallback, useState} from 'react';
import {ApiResult} from "@/utils/data";
import {message, Modal} from "antd";
import {DeleteOutlined} from "@ant-design/icons/lib";
import {MessageType} from "antd/lib/message";
import {newDelay} from "@/utils/utils";

/** 删除组件返回值 */
export interface DeleteOperate<T> {
  /** 表示删除操作是否正在进行中 */
  deleteLoading: boolean;
  /** 删除函数 */
  handleDelete: (selectedRowKeys: string[], selectedRows: T[]) => void;
  /** 删除函数,会有Confirm提示 */
  handleDeleteConfirm: (selectedRowKeys: string[], selectedRows: T[]) => void;
}

/** 删除组件属性 */
export interface DeleteProps<T> {
  /** Confirm 标题 */
  confirmTitle?: React.ReactNode;
  /** Confirm 内容 */
  confirmContent?: React.ReactNode;
  /** Confirm 图标 */
  confirmIcon?: React.ReactNode;
  /** 删除操作进行中提示消息 */
  operateMessage?: React.ReactNode;
  /** 删除操作成功后的提示消息 */
  successMessage?: React.ReactNode;
  /** 服务端删除 */
  onDelete?: (selectedRowKeys: string[], selectedRows: T[]) => Promise<ApiResult>;
  /** 服务端删除操作成功后的回调函数 */
  onDeleteSucess?: () => void;
}

/** 删除操作组件 */
function useDelete<Model>(props: DeleteProps<Model> = {}): DeleteOperate<Model> {
  const options: DeleteProps<Model> = {};
  options.confirmTitle = props.confirmTitle || '系统提示';
  options.confirmContent = props.confirmContent || '确认要删除选中的数据吗？';
  options.confirmIcon = props.confirmIcon || (<DeleteOutlined/>);
  options.operateMessage = props.operateMessage || '正在删除...';
  options.successMessage = props.successMessage || '删除操作成功';
  options.onDelete = props.onDelete;
  options.onDeleteSucess = props.onDeleteSucess;

  /** 删除操作执行状态 */
  const [deleteLoading, setDeleteLoading] = useState<boolean>(false);

  /** 删除操作具体实现 */
  const handleDelete = useCallback((ids: string[], records: Model[]) => {
    if (!options.onDelete) return;

    //使用相同的key,可以直接更新提示内容
    const key = Date.now();
    let hideMessage: MessageType;
    //创建延迟对象,目的是当后台请求很快的时候,可以不显示操作提示
    const delay = newDelay();
    //默认延迟500毫秒才显示操作提示
    delay.run(() => hideMessage = message.loading(options.operateMessage, key));
    setDeleteLoading(true);//设置删除操作执行状态为正在执行中
    // @ts-ignore
    options.onDelete(ids, records)?.then(r => {
      //成功后直接取消显示操作提示的任务
      delay.finish(() => hideMessage && hideMessage());
      setDeleteLoading(false);//重置删除操作执行状态为未进行
      if (r.success) {
        //操作成功后进行消息提示
        message.success({content: options.successMessage, key, duration: 1});
        //删除成功后执行成功回调函数
        options.onDeleteSucess && options.onDeleteSucess();
      }
    }).catch(() => delay.finish(() => {
      //发生错误后,重置状态 隐藏提示消息
      setDeleteLoading(false);
      hideMessage && hideMessage();
    }));
  },[]);

  /** 删除操作,有Confirm提示 */
  const handleDeleteConfirm = useCallback((ids: string[], records: Model[]) => {
    Modal.confirm({
      title: options.confirmTitle,
      icon: options.confirmIcon,
      content: options.confirmContent,
      onOk() {
        //用户点击确定后执行
        handleDelete(ids, records);
      }
    });
  }, []);

  return {
    deleteLoading,
    handleDelete,
    handleDeleteConfirm,
  };
}

export default useDelete;

